<template>
	<Form ref="form" :model="formData" label-position="top" :rules="rules">
		<FormDescItem label="商户名称" prop="site_name" desc="商户名称会作为用户访问的标题，建议不超过6个字">
			<Input v-model="formData.site_name" />
		</FormDescItem>
		<FormDescItem label="系统默认时区在" desc="设置系统默认时区，默认为东八区">
			<Select v-model="formData.site_timeoffset">
                <Option v-for="item in timeZoneLists" :key="item.id" :value="item.id">{{ item.name }}</Option>
            </Select>
		</FormDescItem>
		<FormDescItem label="发票设置" desc="设置是否允许开具发票">
			<RadioGroup v-model="formData.invoice_taxs">
                <Radio label="0">不可开票</Radio>
                <Radio label="1">可开票</Radio>
            </RadioGroup>
		</FormDescItem>
		<FormDescItem label="发票类型" desc="设置允许开具的发票类型，如选择增值税专用发票，则普通发票也可开具">
			<RadioGroup type="button" v-model="formData.invoice_type">
                <Radio label="0">支持普通发票</Radio>
                <Radio label="1">支持增值税专用发票</Radio>
            </RadioGroup>
		</FormDescItem>
		<!-- 普通发票 -->
		<FormDescItem label="普通发票税率" prop="invoice_rate_normal" desc="设置普通发票税率，可按固定税费、百分比或免税设置，如设置为固定税率，则无论购物金额多少均收取固定税费">
			<Input v-model="formData.invoice_rate_normal" number>
				<Select slot="prepend" v-model="formData.invoice_rate_normal_type" style="width: 80px">
		            <Option value="1">固定税费</Option>
		            <Option value="2">百分比</Option>
		        </Select>
			</Input>
		</FormDescItem>
		<!-- 增值税发票 -->
		<div  v-if="formData.invoice_type == 1">
			<FormDescItem label="增值税专用发票税率" prop="invoice_rate_special" desc="设置增值税专用发票税率，可按固定税费、百分比或免税设置，如设置为固定税率，则无论购物金额多少均收取固定税费">
				<Input v-model="formData.invoice_rate_special" number>
					<Select slot="prepend" v-model="formData.invoice_rate_special_type" style="width: 80px">
			            <Option value="1">固定税费</Option>
			            <Option value="2">百分比</Option>
			        </Select>
				</Input>
			</FormDescItem>
		</div>
		<FormDescItem label="普通发票开票类目" prop="invoice_content" desc="设置普通发票开票类目，多个类目请用键盘回车按键分隔">
			<InputTags v-model="formData.invoice_content" />
		</FormDescItem>
		<FormDescItem label="地区分级" prop="regional_classification" desc="设置地区分级，如设置四级地区，则地区会精确到街道">
			<RadioGroup v-model="formData.regional_classification">
                <Radio label="3">三级地区</Radio>
                <Radio label="4">四级地区</Radio>
            </RadioGroup>
		</FormDescItem>
		<FormDescItem label="热搜关键词" desc="设置热搜关键词，多个关键词请用键盘回车按键分隔">
			<InputTags v-model="formData.hot_search_keywords" />
		</FormDescItem>
		<FormItem>
			<Button type="primary" :disabled="committing" @click="handleSubmit">{{committing ? '提交中...' : '保存设置'}}</Button>
		</FormItem>
	</Form>
</template>

<script>
import Util from '@/libs/util.js';
import FormDescItem from '@/components/form/FormDescItem.vue';
import InputTags from '@/components/form/InputTags.vue';
export default {
	components: {
		FormDescItem,
		InputTags
	},
	data() {
		return {
			committing: false,
			formData: {
				site_name: '',
				site_timeoffset: null,
				invoice_taxs: '0',
				invoice_type: '0',
				invoice_rate_normal_type: '2',
				invoice_rate_normal: 6,
				invoice_rate_special_type: '2',
				invoice_rate_special: 17,
				invoice_content: [],
				regional_classification: '3',
				hot_search_keywords: [],
			},
			rules: {
				site_name: [
					{required: true, message: "请填写站点名称", trigger: "blur"}
				],
				invoice_rate: [
					{required: true, message: "请填写发票税率", trigger: "blur"},
					{type: 'number', message: "请填写数字类型", trigger: "blur"}
				]
			}
		}
	},
	computed: {
		configure() {
			return this.$store.state.config.configure;
		},
        timeZoneLists() {
        	return this.$store.state.config.timeZoneLists;
        }
	},
	mounted() {
		// 获取时区列表
		this.$store.dispatch('getTimeZoneListsData');
		this.init();
	},
	watch: {
		configure: {
			deep: true,
			handler() {
				this.init();
			}
		}
	},
	methods: {
		init() {
			let configure = this.configure;
			if(configure && JSON.stringify(configure) != '{}') {
				this.formData.site_name = configure.site_name || '';
				this.formData.site_timeoffset = Number(configure.site_timeoffset) || 0;
				this.formData.invoice_taxs = configure.invoice_taxs;
				this.formData.invoice_type = configure.invoice_type || '0';
				this.formData.invoice_content = configure.invoice_content ? configure.invoice_content.split(',') : [];
				this.formData.regional_classification = configure.regional_classification;
				this.formData.hot_search_keywords = configure.hot_search_keywords ? configure.hot_search_keywords.split(',') : [];
				// 设置税率相关
				if(configure.invoice_type == '1') {
					this.formData.invoice_rate_special_type = configure.invoice_rate_type;
					this.formData.invoice_rate_special = configure.invoice_rate;
				}else{
					this.formData.invoice_rate_normal_type = configure.invoice_rate_type;
					this.formData.invoice_rate_normal = configure.invoice_rate;
				}
			}
		},
		handleSubmit() {
			if(this.committing) return false;
			this.$refs.form.validate(valid => {
                if(valid) {
                	let form = this.formData;
                	let params = {
                		site_name: form.site_name,
						site_timeoffset: form.site_timeoffset,
						invoice_taxs: form.invoice_taxs,
						invoice_type: form.invoice_type,
						invoice_content: form.invoice_content.join(','),
						regional_classification: form.regional_classification,
						hot_search_keywords: form.hot_search_keywords.join(',')
                	}
                	if(form.invoice_type == '1') {
                		params.invoice_rate = form.invoice_rate_special;
                		params.invoice_rate_type = form.invoice_rate_special_type;
                	}else{
                		params.invoice_rate = form.invoice_rate_normal;
                		params.invoice_rate_type = form.invoice_rate_normal_type;
                	}
                	this.committing = true;
                	Util.ajax.post(this.API['API_SETTING_SAVE'], {data: params}).then((res) => {
                		this.committing = false;
                		this.$Message.success('保存成功');
                		// 同步本地数据
                		let configure = this.configure;
                		for(let k in params) {
                			configure[k] = params[k];
                		}
                		this.$store.commit('setSystemConfig', configure);
                	}).catch(() => {
                		this.committing = false;
                	})
                }
            });
		}
	}
}
</script>